<template>
  <div class="tbc-flex-row" :style="outerStyle">
    <div class="tbc-flex-row" style="flex-wrap: wrap;align-content: space-between">
      <div class="tbc-flex-col" style="align-items:center;" v-for="(item, index) in module.data"
           :key="index" :style="itemStyle">
        <div class="tbc-flex-row" style="align-items: center;justify-content: center;background-color: #FEDBAB"
             :style="iconStyle">
          <img :src="item.icon" v-if="item.icon" :style="iconStyle"/>
        </div>
        <span style="margin-top:6px;" :style="fontStyle">{{ item.label }}</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      outerStyle: '',
      itemStyle: '',
      iconStyle: '',
      fontStyle: '',
      module: {
        config: {
          outer: {},
          container: {},
          item: {},
          menu: {lineCount: 5}
        },
        data: []
      }
    }
  },

  methods: {
    // 初始化
    init(data) {
      console.log('init')
      this.module.data = data.data
      this.setOuterStyle(data.config.outer || {})
      this.setMenuIconStyle(data.config.menu || {})
      this.setMenuFontStyle(data.config.menu || {})
      // this.setItemStyle({width: 150})
      this.setItemStyle({
        ...data.config.menu,
        width: data.config.outer.width / data.config.menu.lineCount
      })
    },

    // 设置外层容器样式
    setOuterStyle(data) {
      let style = []
      if (data['width']) style.push('width:' + data['width'] / 2 + 'px')
      if (data['height']) style.push('height:' + data['height'] / 2 + 'px')
      style.push('padding-top:' + data['top-margin'] + 'px')
      style.push('padding-top:' + data['top-margin'] + 'px')
      style.push('padding-bottom:' + data['bottom-margin'] + 'px')
      style.push('padding-left:' + data['left-margin'] + 'px')
      style.push('padding-right:' + data['right-margin'] + 'px')
      style.push('background:' + data['background'])
      this.outerStyle = style.join(';')
    },

    setItemStyle(data) {
      let style = []
      style.push('width:' + data['width'] / 2 + 'px')
      if (data['lineSpace']) style.push('margin-bottom:' + data['lineSpace'] + 'px')
      this.itemStyle = style.join(';')
    },

    // 设置导航图标样式
    setMenuIconStyle(data) {
      let style = []
      style.push('width:' + data['size'] / 2 + 'px')
      style.push('height:' + data['size'] / 2 + 'px')
      style.push('background:' + data['background'])
      this.iconStyle = style.join(';')
    },

    // 设置导航字体样式
    setMenuFontStyle(data) {
      let style = []
      style.push('font-size:' + data['fontSize'] + 'px')
      style.push('color:' + data['fontColor'])
      this.fontStyle = style.join(';')
    },

    // 设置数据样式
    setDataStyle() {

    }
  }
}
</script>